<template>
	<view>
	
		<u-navbar backgroundColor="#fff" :is-back="false" title="购物车" back></u-navbar>
		<view style="margin-top: 30vh;" v-if="cartItems.length<1">
			<u-empty text="您的购物车空空如也,快去添加吧" mode="search" ></u-empty>
		</view>
		<view class="bg-white zaiui-cart-list-view">
			<u-checkbox-group class="block">
				<block v-for="(item,index) in cartItems" :key="index">
					<view class="padding zaiui-checkbox-title-view" style="padding-bottom: 0rpx;">
						<view class="text-black text-lg shop-title" style="display: flex;">
							<view style="margin-right: 10rpx;">
								<image style="height: 50rpx;width: 50rpx;border-radius:25rpx;" :src="shopItems[index].shopAvatar"></image>
							</view>
								{{shopItems[index].shopName}}
								</view>
					</view>
					<block v-for="(items,id) in item" :key="id">
						<view class="light goods-list-item-view">
							
							<u-checkbox  active-color="red" class='round red sm zaiui-checked' @change="CheckboxChange" :class="items.checked?'checked':''" 
							v-model="items.checked?true:false" :name="index+','+id"/>
							<view class="cu-avatar radius lg"  :style="[{backgroundImage:'url('+ items.skuImage +')'}]"/>
							<view class="goods-info-view"  >
								<view class="text-cut"  @click="toDetail(items.spuId,shopItems[index].shopId)" :class="items.status!==0?'text-black':'text-gray'">{{items.spuTitle}}</view>
								<view class="text-sm text-gray">{{items.attrValue}}</view>
								<view class="zaiui-tag-view">
									<text class="cu-tag line-red sm radius" v-if="items.nowPrice<items.initialPrice">比加入时降￥{{items.initialPrice-items.nowPrice}}元</text>
								</view>
								<view class="goods-price-view">
									<view class="text-price-view">
										<text class="text-price  text-lg" :class="items.status!==0?'text-red':'text-gray'">{{items.nowPrice}}<text v-if="items.spuPostage>0" style="font-size: 18rpx;"> + 运费 {{items.spuPostage}}</text></text>
										<text class="cu-tag bg-red sm radius" v-if="items.label">{{items.label}}</text>
									</view>
									<view class="step-btn-view" v-if="!edit" style="margin-left: -30rpx;">
										<u-number-box min=1 :disabled="items.status==0"  :index="index+','+id"  v-model="items.count" @blur="countChange" @plus="countChange" @minus="countChange"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
			</u-checkbox-group>
		</view>
		
		<!--占位底部距离-->
		<view class="cu-tabbar-height"/>
		
		<!--底部操作-->
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom">
			<view class="cu-bar padding-lr">
				<view class="checked-view" @tap="tapChecked"> 
					<u-checkbox  active-color="red" class='round red sm zaiui-checked' :class="checkAll?'checked':''" v-model="checkAll"></u-checkbox>
					<text class="text-black text-lg text-bold">全选</text>
				</view>
				<view class="price-view" v-if="!edit">
					<view class="text-black text-bold">合计：￥{{priceSum}}</view>
					<view class="text-sm">总额:￥{{skuPriceSum}} 邮费:￥{{postageSum}}</view>
				</view>
				<view class="btn-view">
					<button v-show="numberCount>0&&!edit" class="cu-btn radius bg-red" @tap="tapBtn">去结算({{numberCount}})</button>
					<button v-show="numberCount==0" class="cu-btn radius">未选择</button>
					<button v-show="numberCount>0&&edit" class="cu-btn radius bg-red" @tap="tapDel">删除</button>
					
				</view>
			</view>
		</view>
		
		
		<!--编辑-->
		<view class="zaiui-add-btn-view-box" @tap="barEditTap">
			<button class="cu-btn cuIcon-check bg-red" v-if="edit"></button>
			<button class="cu-btn cuIcon-write bg-red" v-else></button>
		</view>
		
	</view>
</template>

<script>
	
	import _my_cart_data from '@/static/zaiui/data/my_cart.js';	//虚拟数据
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		data() {
			return {
				edit:false,
				goodsList: [], 
				goods_checked: false,
				cartItems:[],
				shopItems:[],
				orderData:[],
			}
		},
		onLoad() {
			this.goodsList = _my_cart_data.goodsListData();
		},
		onShow() {
			this.$u.api.getCart().then(res=>{
				this.cartItems=res.cartItems
				this.shopItems=res.shopItems
				this.edit=false
			})
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		computed:{
			numberCount(){
				let sum=0
				this.cartItems.forEach(t=>{
					t.forEach(v=>{
						if(v.checked)
						sum+=1
					})
				})
				return sum
			},
			checkAll:{
				get(){
					for(let i = 0;i<this.cartItems.length;i++){
						for(let t=0;t<this.cartItems[i].length;t++){
							if(!this.cartItems[i][t].checked){
								return false
							}
						}
					}
					return true
				},
				set(val){
					for(let i = 0;i<this.cartItems.length;i++){
						for(let t=0;t<this.cartItems[i].length;t++){
							if(this.cartItems[i][t].checked!=val){
								this.cartItems[i][t].checked=val
							}
						}
					}
				}
				
				
			},
			
			priceSum(){
				return this.skuPriceSum+this.postageSum
			},
			skuPriceSum(){
				let sum=0
				this.cartItems.forEach(t=>{
					t.forEach(v=>{
						if(v.checked)
						sum+=v.nowPrice*100*v.count
					})
				})
				return sum/100
			},
			postageSum(){
				let sum=0
				this.cartItems.forEach(t=>{
					t.forEach(v=>{
						if(v.checked)
						sum+=v.spuPostage*100
					})
				})
				return sum/100
			}
			
		},
		methods: {
			toDetail(spuId,shopId){
				console.log(spuId)
				this.$u.route({
					url:'/pages/productDetail/productDetail?spuId='+spuId+"&shopId="+shopId,
					
				})	
			},
			countChange(e){
				let i = e.index.split(',');
		
				this.$u.api.updateCart({skuId:this.cartItems[i[0]][i[1]].skuId,count:this.cartItems[i[0]][i[1]].count}).then(res=>{
				})
			},
			tapDel(){
				let keys=[]
				this.cartItems.forEach(t=>{
					t.forEach(v=>{
						if(v.checked)
						keys.push(v.skuId)
					})
				})
				this.$u.api.delCart(keys).then(res=>{
					this.$u.api.getCart().then(res=>{
						this.cartItems=res.cartItems
						this.shopItems=res.shopItems
						this.checkAll=false
					})
				})
			},
			CheckboxChange(e) {
				let i = e.name.split(',');
				this.$u.api.updateCart({skuId:this.cartItems[i[0]][i[1]].skuId,checked:!this.cartItems[i[0]][i[1]].checked}).then(res=>{
					this.cartItems[i[0]][i[1]].checked=!this.cartItems[i[0]][i[1]].checked
				})
			},
			
			barEditTap() {
		
				this.edit=!this.edit
				if(this.edit){
					this.checkAll=false
				}
			},
			tapBtn() {
				let data=[]
				
				for(let i=0;i<this.cartItems.length;i++){
					let flag=false
					for(let t=0;t<this.cartItems[i].length;t++){
						if(this.cartItems[i][t].checked&&this.cartItems[i][t].status==1){
							flag=true
						}
					}
					if(flag){
						let row={
							skuList:this.cartItems[i].filter(s=>s.status==1&&s.checked),
							shopData:this.shopItems[i]
						}
						data.push(row)
					}
					
				}
				this.orderData=data
				uni.navigateTo({
					url: '/pages/order/submit'
				});
			}
		}
	}
</script>

<style lang="scss">
	
	@import "../../../static/zaiui/style/my_cart.scss";
</style>
